import 'package:chathouse/constant/my_color.dart';
import 'package:chathouse/public/Config.dart';
import 'package:chathouse/util/base_utils.dart';
import 'package:chathouse/widgets/base_appbar.dart';
import 'package:chathouse/widgets/form_widgets/form_widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../constant/res.dart';
import '../client/client_root_container.dart';
import 'package:get/get.dart';

//教學簡介頁
class GuidePage extends StatefulWidget {
  GuidePage({Key? key}) : super(key: key);

  @override
  State<GuidePage> createState() => _GuidePageState();
}

class _GuidePageState extends State<GuidePage> {
  List<GuideBean> datas = [
    GuideBean(Res.guide_icon_0, Res.guide_bg_0, "尋找你想處理的家居專業服務"),
    GuideBean(Res.guide_icon_1, Res.guide_bg_1, "簡單回答相關問題，讓專家了解"),
    GuideBean(Res.guide_icon_2, Res.guide_bg_2, "相關專家門作出聯絡及報價"),
  ];
  int selectIndex = 0;
  PageController pageController = PageController();
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar(leading: Container(), title: "教學簡介"),
      body: Container(
        color: MyColors.brow_2361890,
        padding: EdgeInsets.only(left: 10.w, right: 10.w),
        child: Column(
          children: [
            Row(
              children: [
                const Spacer(),
                Text(
                  "${selectIndex + 1}/${datas.length}",
                  style: getTextStyle(18.sp, color: Colors.white),
                ),
              ],
            ).setContainer(margin: EdgeInsets.only(top: 10.w)),
            Row(
              children: [
                ImageUtils.image(datas[selectIndex].icon,
                    width: 59.w, height: 59.w),
                Text(
                  datas[selectIndex].title,
                  style: getTextStyle(18.sp, color: Colors.white),
                ).setContainer(margin: EdgeInsets.only(left: 16.w))
              ],
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(top: 1.w, bottom: 1.w),
              child: Stack(
                children: [
                  PageView(
                    children: datas.map((e) {
                      int index = datas.indexOf(e);
                      return ImageUtils.image(datas[index].bg,
                          fit: BoxFit.fitWidth);
                    }).toList(),
                    controller: pageController,
                    onPageChanged: (index) {
                      setState(() {
                        selectIndex = index;
                      });
                    },
                  ),
                  Positioned(
                      right: 0,
                      top: 48.w,
                      child: FormWidgets.getTextButton(
                              selectIndex == (datas.length - 1)
                                  ? "前往首頁"
                                  : "下一頁",
                              MyColors.red_2166474,
                              icon: Icon(
                                Icons.arrow_forward,
                                size: 24.w,
                                color: Colors.white,
                              ))
                          .setContainer(
                        height: 39.w,
                        width: 140.w,
                      )
                          .setOnClickListener(() {
                        if (selectIndex == datas.length - 1) {
                          Get.offAll(const ClientRootPage());
                          return;
                        }
                        setState(() {
                          if (selectIndex < datas.length - 1) {
                            selectIndex = selectIndex + 1;
                          }
                          pageController.jumpToPage(selectIndex);
                        });
                      }))
                ],
              ),
            )),
            Row(children: [
              Text(
                "略過及前往回首頁",
                style: getTextStyle(18.sp, color: Colors.white),
              ),
              Icon(
                Icons.arrow_circle_right_rounded,
                size: 24.w,
                color: Colors.white,
              )
            ])
                .setContainer(margin: EdgeInsets.only(bottom: 30.w))
                .setOnClickListener(() {
              Get.offAll(const ClientRootPage());
            }),
          ],
        ),
      ),
    );
  }
}

class GuideBean {
  String icon;
  String bg;
  String title;
  GuideBean(this.icon, this.bg, this.title);
}
